<!DOCTYPE html>
<html>
<head>
    <style>
        p.dotted{border-style: dotted;}
        p.dashed{border-style: dashed;}
        p.solid{border-style: solid;}
        p.double{border-style: double;}
        p.groove{border-style: groove;}
        p.ridge{border-style: ridge;}
        p.inset{border-style: inset;}
        p.outset{border-style: outset;}
        /* 圆角边框 */
        #circle
        {
            width: 200px;
            height: 200px;
            /* 设置边框圆角值为宽高的一半，即100像素 */
            border-radius: 50%;
            border: 2px solid #b9f007;
            background: rgba(55, 210, 168, 0.982);
        }
    </style>
    <meta charset="UTF-8" />
    <title>边框属性</title>
</head>
<body>
    <!-- 
    边框属性:1.none-无边框 2.hidden-隐藏边框 3.dotted-点线边框 4.dashed-虚线边框 
            5.solid-实线边框 6.double-双线边框 7.groove-3D凹型边框 8.ridge-菱形边框 
            9.inset-3D内嵌边框 10.outset-3D凸型边框
     -->

     <p class="dotted">A dotted border</p>
     <p class="dashed">A dashed border</p>
     <p class="solid">A solid border</p>
     <p class="double">A double border</p>
     <p class="groove">A groove border</p>
     <p class="ridge">A ridge border</p>
     <p class="inset">A inset border</p>
     <p class="outset">A outset border</p>
     <div id="circle"></div>
</body>
</html>